<template>
  <div>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10]" :small="small"
      :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang='ts' setup>

import { ref } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    default: 0
  },

  page: {
    type: [Number, String],
    default: 1
  },

  pageSize: {
    type: [Number, String],
    default: 10
  }
})

const currentPage = ref(1)

const pageSize = ref(10)

const small = ref(false)

const disabled = ref(false)

const background = ref(false)

const handleSizeChange = (val: number) => {
  console.log(currentPage.value, pageSize.value)
  emit('change', currentPage.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
  console.log(currentPage.value, pageSize.value)
  emit('change', currentPage.value, pageSize.value)
}

const emit = defineEmits(['change'])
</script>

<style lang='scss' scoped></style>
